<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./lunbo.css">
    <title>轮播图</title>
    <style></style>
</head>

<body>
    <!-- 轮播图 -->
    <!--  data-ride="carrousel 负责定时器移动项目  slide 平滑过渡的类-->
    <div class="lunbo-box">
        <div class="carousel slide " data-ride="carousel" id="xi-cha">
            <!-- 大图片区 carousel-inner -->
            <div class="carousel-inner">
                <!-- 一张图片 carousel-item 轮播-->
                <div class="carousel-item active">
                    <img src="./img/lunbo1.jpg" class="w-100" alt="">
                </div>
                <!-- 第二张 -->
                <div class="carousel-item">
                    <img src="./img/lunbo2.jpg" class="w-100" alt="">
                </div>
                <!-- 第三张 -->
                <div class="carousel-item">
                    <img src="./img/lunbo3.jpg" class="w-100" alt="">

                </div>
            </div>
            <!-- 左右切换按钮 -->
            <!--  data-slide="prev 控制下一个 -->
            <a href="#xi-cha" class="carousel-control-prev xi-cha" data-slide="prev">
                <span class="carousel-control-prev-icon">
                </span></a>
            <a href="#xi-cha" class="carousel-control-next xi-cha" data-slide="next">
                <span class="carousel-control-next-icon">
                </span></a>
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li class=" active" data-slide-to="0" data-target="#xi-cha"></li>
                <li data-slide-to="1" data-target="#xi-cha"></li>
                <li data-slide-to="2" data-target="#xi-cha"></li>
            </ul>
            
        </div>

    </div>
</body>

</html>